<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Social Mobile</title>
<script>
var chkNative = true;
</script>
<!-- jQuery and jQuery Mobile -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script	src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

<link rel="stylesheet" href="css/mobile-style.css" />
<script type="text/javascript" src="js/social-mobile.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

<style>
#chatmanager-page {
	padding: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#preview {
	width: 80%;
	max-width: 100px;
}

#preview img {
	width: 100%;
}

.hiddenfile {
	width: 0px;
	height: 0px;
	overflow: hidden;
}
</style>
<script>
var imageSelected = false;
var imageSended = false;
</script>
</head>
<body>
	<!-- Home -->
	<div data-theme="a" data-role="page" id="change-photo-page">

		<div data-role="header">
			<h1><img src="img/txtssw.png"></h1>
			<a href="javascript:location.href='users.html';" data-icon="back" data-iconpos="notext" data-rel="dialog" data-transition="fade">Voltar</a>
		</div>

		<div data-role="content" style="padding: 0px;">


			<div align="center">
				<img alt="" src="img/logossw.png"> <br> <img
					src="img/txtssw.png">

				<div style="width: 300px" align="left">
					<br>
					<div id="msg-display" class="msgError"></div>
					
					<form id="frm-login"
						action="/social-mobile-web/rest/profile/register" data-ajax="false"
						enctype="multipart/form-data">
						<div align="center">
							<button id="chooseFile">Selecionar Foto</button>

							<div class="hiddenfile">
								<input type="file" data-clear-btn="false" name="image"
									accept="image/*">
							</div>
							<div id="preview"></div>
							<ul id="info" data-role="listview" data-inset="true">
							</ul>
							<a href="javascript:uploadPhoto();" data-role="button"
								data-icon="arrow-u" data-iconpos="top" data-mini="true"
								data-inline="true">Enviar Foto</a> <br>
							<br>
						</div>
					</form>

				</div>

			</div>


		</div>

	</div>
</body>
<script>
function uploadPhoto() {
	
	if (!imageSelected) {
		msgAlert("Seleciona uma imagem para enviar.");
		return;
	}
	showLoadingMsg();
	inputImage 			= document.querySelector('input[type=file]'); // see Example 4
	file 				= $("input[type=file]")[0].files[0];
	var form = new FormData(), xhr = new XMLHttpRequest();
	
		xhr.addEventListener("load", transferComplete, false);
		xhr.addEventListener("error", transferFailed, false);
		xhr.addEventListener("abort", transferCanceled, false);
		
		form.append('inputFile', file);
		xhr.open('post', '/social-mobile-web/uploadimage', true);
		xhr.send(form);

}


function transferComplete(evt) {
	msgAlert("A imagem foi enviada com sucesso.");
	imageSended = true;
	hideLoadingMsg();
}

function transferFailed(evt) {
	msgAlert("Houve um erro no envio da imagem. Tente novamente.");
	imageSended = false;
	hideLoadingMsg();
}

function transferCanceled(evt) {
	msgAlert("Houve um erro no envio da imagem. Tente novamente.");
	imageSended = false;
	hideLoadingMsg();
}

	$('#change-photo-page').on('pageinit', function() {
		$("#chooseFile").click(function(e) {
			e.preventDefault();
			$("input[type=file]").trigger("click");
		});
		$("input[type=file]").change(function() {
			var file = $("input[type=file]")[0].files[0];
			$("#preview").empty();
			imageSelected = false;

			displayAsImage3(file, "preview");

			$info = $("#info");
			$info.empty();
			if (file && file.name) {
				imageSelected = true;
			}
			$info.listview("refresh");
		});
	});

	function displayAsImage3(file, containerid) {
		if (typeof FileReader !== "undefined") {
			var container = document.getElementById(containerid), img = document
					.createElement("img"), reader;
			container.appendChild(img);
			reader = new FileReader();
			reader.onload = (function(theImg) {
				return function(evt) {
					theImg.src = evt.target.result;
				};
			}(img));
			reader.readAsDataURL(file);
		}
	}
</script>
</html>
